* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

}

.content {
	width: 1000px;
	overflow: hidden;

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: space-between;
}

.contt {
	width: 960px;

	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: space-between;
	transition: all 1s;
}

.left {
	display: flex;
	width: 0px;
	height: 600px;
	background-color: #00BAAD;
	justify-content: center;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;

}

.leftt {
	display: flex;
	width: 480px;
	height: 600px;
	background-color: #00BAAD;
	justify-content: center;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	transition: all 0.6s;

}

/* 简历封面 */
.jl {
	position: absolute;
	top: 20%;
	left: 5%;
	width: 250px;
	height: 0px;
	border-radius: 23px;
	background: #00BAAD;
	box-shadow: 8px 8px 25px #00665f,
		-8px -8px 25px #00fffb;
	overflow: hidden;
}

.jls {
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	top: 20%;
	left: 5%;
	width: 250px;
	height: 70%;
	border-radius: 23px;
	background: #00BAAD;
	box-shadow: 8px 8px 25px #00665f, -8px -8px 25px #00fffb;
	transition: all 1s;
	align-content: stretch;
	justify-content: space-around;
}

.yd {
	position: absolute;
	top: -55px;
	width: 40%;
	height: 50px;
	display: flex;
	justify-content: space-between;

}

.dys {
	top: 13px;
	width: 40%;
	height: 50px;
	display: flex;
	justify-content: space-between;
	position: absolute;
	transition: all 0.5s;
}

/* 小圆点 */
.y1,
.y2,
.y3,
.y4,
.y5,
.y6 {
	border-radius: 50%;
	width: 50px;
	height: 50px;
	background-color: #55ffff;
}

.y1,
.y4 {
	border-radius: 50%;
	background: #A5D63F;
	box-shadow: -3px 1px 8px #668527, -3px -1px 8px #e4ff57;
}

.y2,
.y5 {
	border-radius: 50%;
	box-shadow: -3px 1px 8px #9e9e9e, -3px -1px 8px #ffffff;
	background-color: #ffffff;
}

.y3,
.y6 {
	border-radius: 50%;
	box-shadow: -3px 1px 8px #690000, -3px -1px 8px #eb0000;
	background-color: #aa0000;
}

.right {
	display: flex;
	justify-content: space-around;
	width: 0px;
	height: 600px;
	background-color: #000000;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	flex-wrap: wrap;

}

.rightt {
	display: flex;
	justify-content: space-around;
	width: 480px;
	height: 600px;
	background-color: #000000;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	flex-wrap: wrap;
	transition: all 0.8s;

}

.p {

	margin: 5px 0;
	/* transform: translateX(150px); */
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	letter-spacing: 2px;
	word-wrap: break-word;
}

/* 右边标题 */
.con {
	margin-top: 3%;
	text-align: center;
	width: 36%;
	height: 50px;
	top: 30px;
	position: absolute;
	transform: translateX(120%);

}

.its {
	display: flex;
	flex-direction: column;
	width: 400px;
	height: 500px;
	border: 1px dashed #fff;
	position: absolute;
	top: 90px;
	padding: 0 20px;
	transform: translateX(110%)
}

.itsss {
	display: flex;
	flex-direction: column;
	width: 458px;
	height: 500px;
	border: 1px dashed #fff;
	position: absolute;
	top: 90px;
	padding: 0 20px;
	transform: translateX(0);
	transition: all 1s;
}

.conn {
	display: flex;
	text-align: center;
	height: 50px;
	margin-top: 3%;
	transform: translateX(0);
	justify-content: space-around;
	align-items: center;
	transition: all 2s;
}

strong {
	font-size: 25px;
}

/* 左边横线 */
.leftt span {
	display: inline-block;
	position: absolute;
	top: 80px;
	left: -481px;
	width: 481px;
	height: 5px;
	background-color: #ffffff;
	transition: all 1s;
}

/* 内容 */
.nr {

	width: 200px;
	height: 0px;


}

.s1 {
	color: transparent;
	transform: translateX(-180px);
	background-color: transparent;
}

.sss {
	color: #fff;
	display: flex;
	width: 80px;
	height: 30px;
	justify-content: space-around;
	align-items: center;
	border-radius: 5px;
	background: #00BAAD;
	box-shadow: 5px 5px 8px #009389,
		-5px -5px 8px #00e1d1;
	transition: all 1s;
}

.sss:hover {
	border-radius: 5px;
	background: #00BAAD;
	box-shadow: inset 6px 6px 12px #008a81,
		inset -6px -6px 12px #009c91;
}

.s2 {
	color: #ffffff;
	display: flex;

	width: 80px;
	height: 30px;
	justify-content: space-around;
	align-items: center;
	border-radius: 5px;
	background: #00BAAD;
	box-shadow: 5px 5px 8px #009389,
		-5px -5px 8px #00e1d1;
}

.s2:hover {
	border-radius: 5px;


	background: #00BAAD;
	box-shadow: inset 6px 6px 12px #008a81,
		inset -6px -6px 12px #009c91;
}

.nrs {
	font-size: 18px;
	margin-top: 30%;
	color: #fff;
}

/* 内容 */
.nrr {
	display: flex;
	width: 200px;
	height: 300px;
	transition: all 1s;
	border-radius: 24px;
	background: #00BAAD;
	box-shadow: inset 5px 5px 8px #009389, inset -5px -5px 8px #00e1d1;
	justify-content: space-evenly;
	flex-wrap: wrap;
	align-items: center;
}

/* 右边横线 */
.rightt span {
	display: inline-block;
	position: absolute;
	top: 80px;
	right: -481px;
	width: 481px;
	height: 5px;
	background-color: #ffffff;
	transition: all 2s;
}

/* 说明 */
.sm {
	display: flex;
	align-items: center;
	transform: translateY(-50px);
	justify-content: space-around;
	width: 100px;
	height: 50px;
	color: #fff;
}

.smm {
	display: flex;
	align-items: center;
	justify-content: space-around;
	transform: translateY(10px);
	color: #fff;
	width: 100px;
	height: 50px;
	background: #00BAAD;
	box-shadow: 8px 8px 16px #00ab9f,
		-8px -8px 16px #00c9bb;
}

/* 左边横线点击事件 */
.lspan {
	transform: translate(100%);
}

/* 右边横线点击事件 */
.rspan {
	transform: translate(-100%);
}

/* 太极 */
.y {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	/* display: none; */
}

.ys {
	width: 0px;
	height: 0px;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	/* transition: all 0.5s; */
}

.y img {
	width: 100%;
	height: 100%;
	transition: all 3s;
}

.ys img {
	width: 100%;
	height: 100%;

}

.y:hover img {
	transform-origin: center;
	transform: rotateZ(360deg)
}

/* 按钮 */
.btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	width: 0px;
	height: 0px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 5px 5px 14px #adadad,
		-5px -5px 14px #ffffff;



}

.btnn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 5px 5px 14px #adadad,
		-5px -5px 14px #ffffff;
	transition: all 1s;

}

.bts {
	width: 0px;
	height: 0px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border-radius: 50%;
	background: linear-gradient(145deg, #ffffff, #e6e6e6);
	box-shadow: 5px 5px 14px #adadad,
		-5px -5px 14px #ffffff;
}

.btss {
	width: 150px;
	height: 150px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border-radius: 50%;
	background: linear-gradient(145deg, #ffffff, #e6e6e6);
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 5px 5px 15px #cfcfcf,
		-5px -5px 15px #ffffff;
	transition: all 1s;
}

.tto {
	display: none;
}

.btss:active {
	border-radius: 50%;
    background: #ffffff;
	box-shadow: inset 5px 5px 15px #cfcfcf,
		inset -5px -5px 15px #ffffff;
}